<template>
  <div class="orderbox">
    <div style="height: 90%;">
      <div
        class='box1'
        v-for="(value,index) in listData"
        :key="index"
      >
        <div class="boxheader">
          <p class="pbox">{{value.order.dateTime}}</p>
          <p class="pbox1">订单号：{{value.orderM.order}}</p>
          <p class="pbox2">单位名称：{{value.order.company}}</p>

          <div class="pbox3"><button style="background-color: #aa0000; border: none; color: white;">删除</button></div>
          <div class="pbox3"><button style="background-color: #aa0000; border: none; color: white">修改</button></div>
        </div>
        <div class="boxbody">
          <div class="boxbody1">
            <div class='imgbox'>
              <img
                style="width: 100%;height: 100%;"
                :src="value.magazine.image||imageurl"
              />
            </div>
            <p style="width: 40%;float: left;padding-left:3%">{{setName(value)}}</p>
            <p style="width: 20%;float: left;color: #aa0000;">¥ {{value.orderM.money}}</p>
            <p style="width: 20%;float: left;">{{value.orderM.quantity}}份</p>
          </div>
          <div class="boxbody2">
            <p>{{setPayStatus(value.order.pay)}}</p>
          </div>
          <div class="boxbody3">
            <p style="color: #393939;">{{setInvoiceStatus(value.order.invoice)}}</p>
            <p
              style="padding-top: 3%;"
              v-if="value.invoices.datetime"
            >{{value.invoices.datetime}}</p>
            <p
              v-if="value.invoices.invoiceid"
              style="width:80%;padding: 3% 10% 0 10%;word-break: break-all;color: #8d8d8d; "
            >{{value.invoices.invoiceid}}</p>
          </div>
          <div class="boxbody4">
            <p>收刊地址></p>
            <p>查看发刊></p>
          </div>
        </div>
      </div>
    </div>
    <div class="pagefoot">
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>

    </div>
  </div>
</template>

<script>
import { orderlist } from '../../api/basisMG'
import Pagination from '../../components/pagination';
export default {
  name: 'order-index',
  data() {
    return {
      imageurl: require('@/assets/book.png'),
      listData: [],
      pageparm: {
        currentPage: 1,
        pageSize: 4,
        total: 4
      },
      formInline: {
        page: 1,
        limit: 4,
      },
      payStatusList: [
        { label: '未付款', value: 0 },
        { label: '已付款', value: 1 },
        // { label: '付款待确认', value: 2 },
        { label: '部分付款', value: 3 },
        // { label: '退款', value: 4 },
        // { label: '强制付款完成', value: 5 },
      ],
      invoiceStatusList: [
        { label: '不要发票', value: -1 },
        { label: '未申请', value: 0 },
        { label: '未开票', value: 1 },
        { label: '已审核', value: 2 },
        { label: '已开票', value: 3 },
        { label: '已邮寄', value: 4 },
        { label: '删除', value: 5 },
      ],
    }
  },
  components: {
    Pagination
  },
  created() {
    // this.getdata(this.formInline)
    this.getList(this.pageparm)
  },
  methods: {
    setName(obj) {
      return `${obj.magazine.magazine}[${obj.orderM.periodsStart}-${obj.orderM.periodsEnd}]`
    },
    setPayStatus(num) {
      return this.payStatusList.filter(item => {
        return item.value === num
      })[0].label
    },
    setInvoiceStatus(num) {
      return this.invoiceStatusList.filter(item => {
        return item.value === num
      })[0].label
    },
    async getList(data) {
      const res = await orderlist(data)
      this.listData = res.data.records
      this.pageparm.total = res.data.total
    },
    // 分页插件事件
    callFather(parm) {
      this.getList(parm)
    }
  }
}
</script>

<style scoped>
.orderbox {
  margin: 0 20% 0 20%;
  width: 60%;
  height: 100%;
}
.box1 {
  width: 100%;
  height: 23%;
  padding-top: 10px;
}
.boxheader {
  padding-left: 2%;
  width: 99%;
  height: 26%;
  background-color: #aa0000;
  font-size: 16px;
  font-family: 黑体;
  color: #fff;
  border-radius: 10px 10px 0 0;
}
.boxbody {
  font-size: 16px;
  padding-left: 2%;
  width: 99%;
  display: flexbox;
  height: 80%;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}
.boxheader > p {
  font-weight: 300;
  margin: 0;
  height: 100%;
  display: flex;
  justify-items: center;
  align-items: center;
}
.pbox {
  color: aliceblue;
  width: 15%;
  float: left;
}
.pbox1 {
  color: aliceblue;
  width: 25%;
  float: left;
}
.pbox2 {
  color: aliceblue;
  width: 20%;
  float: left;
}

.pbox3{
  text-align: center;
  color: aliceblue;
  width: 6%;
  height: 100%;
  line-height: 36px;
  float: right;
}

.pbox3 > button {
  cursor: pointer;
}

.imgbox {
  width: 16%;
  height: 80%;
  margin: 2% 0 2% 0;
  float: left;
  border-radius: 10px;
}
.boxbody1 {
  height: 100%;
  width: 50%;
  float: left;
  display: flex;
  align-items: center;
}
.boxbody2 {
  height: 100%;
  width: 15%;
  float: left;
  /* padding-top: 1%; */
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
}
.boxbody2 > p {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  white-space: pre-wrap;
}
.boxbody3 {
  float: left;
  height: 100%;
  width: 20%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.boxbody3 > p {
  margin: 0;
}
.boxbody4 {
  float: left;
  width: 14%;
  height: 100%;
  border-left: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.boxbody4 > p {
  text-align: center;
  /* margin: o; */
  margin: 5px 0;
  color: #aa0000;
}
.pagefoot {
  width: 100%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-pagination {
  align-items: center;
}
</style>
